<template>
    <div id="roll-call-stu">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="cancel">课堂点名</span> / 课程详情
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">
                    <span>教师：{{teacherName}}</span>
                    <span style="margin-left:20px;">课程：{{className}}</span>
                    <span style="margin-left:20px;">课程人数：{{studentNum}}</span>
                    <span style="margin-left:20px;">点名次数：{{rollCallNum}}</span>
                </span>
                <el-button class="cancel" type="primary" @click="cancel">返回</el-button>
            </div>
            <el-table :data="list" @row-click="toRollCallDet">
                <el-table-column prop="campusId" label="学号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="attendanceNum" label="出勤（次）">
                </el-table-column>
                <el-table-column prop="absenceNum" label="缺勤（次）">
                </el-table-column>
                <el-table-column prop="leaveNum" label="请假（次）">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                className: "",
                studentNum: "",
                rollCallNum: "",
                teacherName: ""
            };
        },
        mounted() {
            this.getLocalStorage();
            this.clearStorage();
            this.getList();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            //返回
            cancel() {
                let url = location.href.replace("stuList", "teacherList");
                location.href = url;
            },
            getList() {
                this.list = [];
                let url = this.$util.domain + "/campusadminapi/v2/rollcall/class/detail";
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        mid: this.$util.getStore("mid") * 1,
                        sid: this.$util.getUrlParam("sid") * 1,
                        cid: this.$util.getStore("cid") * 1
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        let list = response.data.data;
                        this.list = [];

                        if (list && list.length) {
                            list.forEach(item => {
                                this.list.push({
                                    uid: item.uid,
                                    name: item.name,
                                    leaveNum: item.leaveNum,
                                    campusId: item.campusId,
                                    absenceNum: item.absenceNum,
                                    attendanceNum: item.attendanceNum
                                })
                            });
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });

            },
            toRollCallDet(item) {
                let url = location.href.replace("stuList", "rollCallDet");
                this.$util.setStore("uid", item.uid);
                this.$util.setStore("name", item.name);
                this.$util.setStore("campusId", item.campusId);
                location.href = url;
            },
            //获取本地存储
            getLocalStorage() {
                this.teacherName = this.$util.getStore("teacher");
                this.className = this.$util.getStore("className");
                this.studentNum = this.$util.getStore("studentNum");
                this.rollCallNum = this.$util.getStore("rollCallNum");
            },
            //清除localStorage
            clearStorage() {
                let removeAr = ["uid", "name", "campusId"];
                this.$util.removeStore(removeAr);
            }
        }
    };
</script>

<style>
    #roll-call-stu {
        padding-top: 80px;
        height: calc(100% - 80px);
    }

    #roll-call-stu .title {
        color: #0398ff;
    }

    #roll-call-stu .list {
        height: calc(100% - 30px);
    }

    #roll-call-stu .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #f7fcff;
        cursor: pointer;
    }
</style>